<template>
  <div class="outer">
    <el-form inline>
      <div>
        <el-form-item>
          <el-select v-model="selectValue" placeholder="请选择员工" @change="SP_selectName($event)">
            <el-option
              v-for="item in gzbb_personName"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="beginTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
            :picker-options="pickerOptions0"
            @change="changeDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
            :picker-options="pickerOptions1"
            @change="changeDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click=" Salary_PersonHandleChangeOne()">查询</el-button>
                        <el-button class="buttonExport" @click=" QualityHandleChangeOne()">导出</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-tabs id="tabb" v-model="SP_eltabs" type="card">
      <el-tab-pane label="个人工作表格" name="first">
        <el-table border stripe :data="reportSalaryPersonalDateArray" :span-method="arraySpanMethod">
          <el-table-column label="序号" type="index" align="center" width="100"></el-table-column>
          <el-table-column prop="finishedTime" label="日期" align="center" width="100"></el-table-column>
          <el-table-column prop="dispatchNumber" label="派工单号" align="center" width="100"></el-table-column>
          <el-table-column prop="drawingNumber" label="图号" align="center" width="100"></el-table-column>
          <el-table-column prop="productName" label="品名" align="center" width="100"></el-table-column>
          <el-table-column prop="processName" label="工序" align="center" width="100"></el-table-column>
          <el-table-column prop="totalNumber" label="投产数量" align="center" width="100"></el-table-column>
          <el-table-column prop="numWorkQualifiedDebug" label="调试合格" align="center" width="100"></el-table-column>
          <el-table-column prop="numWorkQualified" label="加工合格" align="center" width="100"></el-table-column>
          <el-table-column prop="numWorkQualifiedRework" label="返工合格" align="center" width="100"></el-table-column>
          <el-table-column prop="numWorkWasteMaterial" label="料废" align="center" width="100"></el-table-column>
          <el-table-column prop="numWorkWasteIndustrial" label="工废" align="center" width="100"></el-table-column>
          <el-table-column prop="numReviewRework" label="返修" align="center" width="100"></el-table-column>
          <el-table-column prop="debugHour" label="调试工时" align="center" width="100"></el-table-column>
          <el-table-column prop="quotaHour" label="定额工时" align="center" width="100"></el-table-column>
          <el-table-column prop="workHour" label="总工时" align="center" width="100"></el-table-column>
          <el-table-column prop="price" label="价钱" align="center" min-width="100"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="个人工资工时图表" name="second">
        <bar
          ref="echart1"
          :text="chartText"
          :nameBar="chartBarName"
          :yAxisNameBar="yAxisNameBar"
          :yAxisNameLine="yAxisNameLine"
          :nameLine="chartLineName"
          :value="chartValue"
        ></bar>
        <!-- <div id="SP_chart1" class="SP_EchartFrame"></div> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script >
import * as echarts from 'echarts'
import { selectSalaryPerson } from '@/api/bi'
import Bar from './components/bar.vue'
export default {
  data() {
    return {
      chartText: '个人工时工资报表',
      chartBarName: '工时',
      chartLineName: '价钱',
      yAxisNameBar: '工时',
      yAxisNameLine: '价钱/元',
      chartValue: {
        xAxis: [],
        yAxis: [],
        yAxisLine: []
      },
      reportSalaryPersonalDateArray: [],
      searchParam: '',
      response: '',
      pickerOptions0: '',
      pickerOptions1: '',
      beginTime: '',
      endTime: '',
      selectValue: '',
      SP_eltabs: 'first',
      SP_CompleteDate: '',
      Person_YearOne: '',
      Person_MonthOne: '',
      SP_ChooseName: '',
      SP_originDate: [],
      SP_timevalue: '',
      gzbb_personName: [],
      SP_tableData: []
    } //end of return
  }, //ed of data()
  mounted() {
    this.drawForm()
    this.obtainSelect()
  },
  methods: {
/**合并单元格 */
arraySpanMethod({ row, column, rowIndex, columnIndex }){

if (row.dispatchNumber.indexOf(";")!=-1) {
          if (columnIndex === 2) {
            return [1, 13];
          } else if (columnIndex >2 && columnIndex<15) {
            return [0, 0];
          }
        }
},

    /** 限制两个日历选择器，使开始时间小于结束时间，并且所选时间早于当前时间*/
    changeDate() {
      //因为date1和date2格式为 年-月-日， 所以这里先把date1和date2转换为时间戳再进行比较
      let date1 = new Date(this.beginTime).getTime()
      let date2 = new Date(this.endTime).getTime()
      this.pickerOptions0 = {
        disabledDate: time => {
          if (date2 != '') {
            return time.getTime() > Date.now() || time.getTime() > date2
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
     
    },

    /** 获取下拉列表数据 */
    async obtainSelect() {
      this.response = await selectSalaryPerson()
      this.gzbb_personName = this.response.data.select_data
       this.gzbb_personName=this.gzbb_personName.slice(1,this.gzbb_personName.length)
      console.log(this.gzbb_personName)
    },
    /** 在画布上画上图表框架 */
    drawForm() {},

    /** 通过点击事件，获取选择的人物 */
    SP_selectName(id) {
      this.SP_ChooseName = id
      console.log(this.SP_ChooseName)
    }, //end of selectFn1
    /** 通过选择时间，获取选择人物在时间内的数据 */
    async Salary_PersonHandleChangeOne() {
      let response = await selectSalaryPerson({ chooseId: this.SP_ChooseName, beginTime: this.beginTime, endTime: this.endTime })
      var newDate = []
      var newWT = []
      var newPrice = []
      this.SP_originDate = response.data.echartData
      this.reportSalaryPersonalDateArray = response.data.table_data
      // 选择人名对echart显示数据
      newDate =this.SP_originDate.echartTime
      newWT = this.SP_originDate.echartWorkHour
      newPrice = this.SP_originDate.echartPrice
      this.chartValue.xAxis = newDate
      this.chartValue.yAxis = newWT
      this.chartValue.yAxisLine = newPrice
      this.$refs.echart1.drawBar()
    } //end of Salary_PersonHandleChangeOne(val)
  },

  components: {
    Bar
  }
} //end of default
</script>

<style >
.outer {
  position: absolute;
  margin-top: 60px;
  padding-left: 20px;
}
.SP_EchartFrame {
  float: left;
  width: 1400px;
  height: 700px;
  border: 1px solid #fcfcfc;
}
.SP_SelectFrame {
  float: left;
  width: 1080px;
  height: 54px;
  border: 1px solid black;
}

.SP_selectID {
  float: left;
  width: 180px;
  height: 40px;
}
.SP_tabs {
  float: left;
  width: 1080px;
  height: 700px;
  border: 1px solid black;
}
#tabb.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 3px solid #004098 !important;
  background-color: #fafafa !important;
  color: #004098 !important;
}
#tabb.el-tabs {
  height: calc(100vh - 130px);
  overflow: hidden;
}

#tabb .el-tabs__content {
  max-height: calc(100vh - 189px);
  min-height:600px;
  min-width: 1400px;
  overflow-y: auto;
}
.buttonExport{
  color:white;
  background-color: #004098 !important;
}
</style>